<template>
  <div class="h-full flex flex-col">
    <!-- <Draggable>
      <div class="h-[100px] w-[160px]">AI生成内容</div>
    </Draggable> -->
    <div class="model-header p-[10px]">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="9" :md="8" :lg="5" :xl="3" class="mb-[15px]">
          <el-input v-model="queryData.id" placeholder="请输入子任务ID" />
        </el-col>
        <el-col :xs="24" :sm="9" :md="8" :lg="5" :xl="3" class="mb-[15px]">
          <el-select v-model="queryData.userId" placeholder="请选择标注员">
            <el-option
              v-for="item in options.userOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>
        <el-col
          :xs="24"
          :sm="14"
          :md="12"
          :lg="8"
          :xl="5"
          class="mb-[15px] radio4"
        >
          <el-radio-group v-model="queryData.type">
            <el-radio-button label="标注中 22" value="1" />
            <el-radio-button label="已驳回 0" value="2" />
            <el-radio-button label="待审核 0" value="3" />
            <el-radio-button label="已完成 7" value="4" />
          </el-radio-group>
        </el-col>
        <el-col :xs="24" :sm="8" :md="6" :lg="4" :xl="4" class="mb-[15px]">
          <el-button class="w-[80px]" color="#626aef" type="primary">
            查询
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="sheet flex-1 overflow-auto mt-[10px]">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="子任务ID" align="center" />
        <el-table-column prop="labeledNum" label="数据量" align="center" />
        <el-table-column prop="points" label="积分" align="center" />
        <el-table-column prop="username" label="标注员" align="center" />
        <el-table-column prop="passRate" label="合格率" align="center">
          <template #default="{ row }"> {{ row.passRate || 0 }}% </template>
        </el-table-column>
        <el-table-column prop="status" label="子任务状态" align="center">
          <template #default="{ row }">
            <el-tag effect="dark" :type="row.status === 0 ? 'info' : 'success'">
              {{ row.status === 0 ? '标注中' : '已完成' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ctime" label="分配时间" align="center" />
        <el-table-column label="操作" align="center" width="280">
          <template #default="{ row }">
            <el-button
              type="primary"
              class="table-button"
              @click="skipDatabase(row)"
              text
            >
              <SvgIcon class="mr-[2px]" name="examine" size="16px" />
              <span>查看</span>
            </el-button>
            <template v-if="row.passRate !== 100">
              <el-button type="primary" class="table-button" text>
                <SvgIcon class="mr-[2px]" name="replace" size="16px" />
                <span>更换标注员</span>
              </el-button>
              <el-button type="primary" class="table-button" text>
                <DocumentChecked class="w-[18px] h-[18px] mr-[2px]" />
                <span>提交审核</span>
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-center py-[15px] border-t">
      <el-pagination
        v-model:current-page="queryData.pageNum"
        v-model:page-size="queryData.pageSize"
        :page-sizes="[5, 10, 20, 50]"
        :total="tableData.length"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { defineAsyncComponent, reactive } from 'vue';
  import { useRouter } from 'vue-router';

  const SvgIcon = defineAsyncComponent(
    () => import('@/components/SvgIcon.vue'),
  );

  const router = useRouter();

  const queryData = reactive({
    id: '', //子任务id
    userId: '', //标注员
    type: '', //标注类型
    pageNum: 1, //页码
    pageSize: 10, //页数
  });

  const options = reactive({
    userOptions: [
      {
        value: '1',
        label: '六豆豆',
      },
      {
        value: '2',
        label: '王鹏鹏',
      },
      {
        value: '3',
        label: '敏感词',
      },
    ],
  });

  const tableData = [
    {
      assamplingRatio: 0,
      ctime: '2025-02-26 18:26:23',
      hasExample: 1,
      id: '2502261003',
      labeledNum: 11,
      labeledType: 2,
      llmId: 35,
      passCount: null,
      passRate: null,
      points: 11,
      reviewCount: 0,
      reviewName: '系统',
      singlePoints: 1,
      status: 0,
      taskId: 150,
      taskName: '语义质检-包类模型-粤语复核5',
      taskStatus: 1,
      userId: '7',
      username: '陈松青',
    },
    {
      assamplingRatio: 0,
      ctime: '2025-02-26 11:31:52',
      hasExample: 1,
      id: '2502261002',
      labeledNum: 39,
      labeledType: 2,
      llmId: 35,
      passCount: null,
      passRate: 100,
      points: 50,
      reviewCount: 39,
      reviewName: '系统',
      singlePoints: 1,
      status: 3,
      taskId: 150,
      taskName: '语义质检-包类模型-粤语复核5',
      taskStatus: 1,
      userId: '36',
      username: '黄雪燕',
    },
  ];

  const handleSizeChange = (val: number) => {
    queryData.pageSize = val;
  };

  const handleCurrentChange = (val: number) => {
    queryData.pageNum = val;
  };

  const skipDatabase = (row: any) => {
    router.push({
      path: '/mark/task/detail/data-list',
      query: {
        taskId: `${row.taskName}-子任务${row.id}`,
        id: row.id,
        ...router.currentRoute.value.query,
      },
    });
  };
</script>

<style scoped>
  .el-button {
    padding: 5px !important;
  }
</style>
